<script setup>
import { ref } from 'vue'
import * as Cesium from 'cesium'

const description = ref('')
const isText = ref(false)
const isPicture = ref(false)
const commitSetting = () => {
  window.viewer.entities.removeAll()
  fetch('point.json').then(res => res.json())
  .then(data => {
    data.forEach(element => {
      window.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(...element.coordinates),
        point: {
          pixelSize: 20,   // 点大小
          color: Cesium.Color.YELLOW,  // 图元颜色
          outlineColor: Cesium.Color.RED  // 轮廓颜色
        }
      })
      if(isText.value) {
        window.viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(...element.coordinates),
          label: {
            show: true,
            font: '20px sans-serif',
            backgroundColor: Cesium.Color.RED,
            outlineColor: Cesium.Color.BLACK
          },
        })
      }
      if(isPicture.value) {
        window.viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(...element.coordinates),
          billboard: {
            // 是否显示
            show: true,
            // 图像地址，URI或Canvas的属性
            image: 'image1.png',
            // 设置颜色和透明度
            color: Cesium.Color.WHITE.withAlpha(0.8),
            // 高度（以像素为单位）
            height: 50,
            // 宽度（以像素为单位）
            width: 50,
            // 逆时针旋转
            rotation: 20,
            // 大小是否以米为单位
            sizeInMeters: false,
            // 相对于坐标的垂直位置
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // 相对于坐标的水平位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
            pixelOffset: new Cesium.Cartesian2(10, 0),
            // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
            scale: 0.7,
          }
        })
      }
    })
  })
}
</script>

<template>
  <div class="emergency-panel">
    <div class="emergency-title">消防站专题图设置</div>
    <div class="emergency-content">
      <div class="emergency-description">
        描述
        <input type="text" v-model="description" style="width: 250px;" />
      </div>
      <div class="emergency-isText">
        是否显示文字
        <el-switch v-model="isText" />
      </div>
      <div class="emergency-isPicture">
        <div class="emergency-isPicture-title">
          是否显示图标
          <el-switch v-model="isPicture" />
        </div>
        <div class="emergency-picture">
          图标
          <input type="text" style="width: 50px;" />
        </div>
        <div class="emergency-size">
          图标大小
          <input type="number" min="0" max="Infinity" step="1" value="1"
          style="width: 50px;"/>
        </div>
      </div>
      <div class="emergency-point">
        <div class="emergency-point-item">图元颜色</div>
        <div class="emergency-point-item">大小</div>
        <div class="emergency-point-item">样式</div>
        <div class="emergency-point-item">偏移</div>
        <div class="emergency-point-item">标注文字方向</div>
      </div>
    </div>
    <button style="width: 80px;position: absolute;cursor: pointer;
      left: 50%;bottom: 10px;transform: translateX(-50%);"
      @click="commitSetting">确定</button>
  </div>
</template>

<style lang="scss">
.emergency-panel {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 400px;
  height: 550px;
  background-color: #fff;
  font-size: 14px;

  .emergency-title {
    width: 100%;
    height: 50px;
  }
  .emergency-content {
    position: relative;
    width: 100%;

    .emergency-description {
      width: 380px;
      margin-left: 40px;
      margin-bottom: 10px;
    }

    .emergency-isText {
      width: 380px;
      margin-left: 40px;
      margin-bottom: 10px;
    }

    .emergency-isPicture {
      display: flex;
      align-items: center;
      width: 380px;
      margin-left: 40px;
      margin-bottom: 10px;
    }

    .emergency-point {
      width: 380px;
      margin-left: 40px;
      margin-top: 20px;

      .emergency-point-item {
        margin-top: 10px;
      }
    }
  }
}
</style>
